<template>

  <div>
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img src="@/assets/logo.png" alt="" class="logo" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn" />
        </template>
      </van-nav-bar>
    </div>

    <!-- tab导航 -->
    <div class="main">
      <van-icon name="plus" size="0.37333334rem" class="moreChannels"
      @click="showPopup" />
      <!-- 弹出层 -->
      <van-popup v-model="show" class="channel_popup">
        <ChannelEdit
        :unCheckList="unCheckChannelList" :userList='userChannelList'
        @addChannelEV ='addChannelFn'
        @removeChannelEV ='removeChannelFn'
        @closeEV='closeFn'
        @changeChannelEV='changeChannelFn'
        ></ChannelEdit>
      </van-popup>
    <van-tabs v-model="channelId"
    sticky offset-top="1.226667rem">
      <van-tab v-for="obj in userChannelList" :key="obj.id"
      :title="obj.name" :name="obj.id">

      <AriticleList :channelId="channelId" ></AriticleList>
      </van-tab>
      <!-- <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab> -->

    </van-tabs>
    </div>

  </div>
</template>

<script>
import { updateChannelsAPI, getUserChannelsAPI, getAllChannelsAPI } from '@/api'

import ChannelEdit from './ChannelEdit.vue'
import AriticleList from '@/components/AriticleList.vue'
export default {
  data () {
    return {
      channelId: 0,
      userChannelList: [],
      show: false,
      allChannelList: []
    }
  },
  components: {
    AriticleList, ChannelEdit
  },
  async created () {
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels
    // console.log(res)
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
    console.log(res2)
  },
  methods: {
    showPopup () {
      this.show = true
    },
    async addChannelFn (obj) {
      this.userChannelList.push(obj)
      this.updateChannelFn()
    },
    async updateChannelFn () {
      const newArr = this.userChannelList.filter(item => item.id !== 0)
      const theNewArr = newArr.map((item, index) => {
        const newObj = { ...item }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    async removeChannelFn (obj) {
      const index = this.userChannelList.findIndex(item => item.id === obj.id)
      this.userChannelList.splice(index, 1)
      this.updateChannelFn()
    },
    closeFn () {
      this.show = false
    },
    changeChannelFn (id) {
      this.channelId = id
    },
    moveSearchPageFn () {
      this.$router.push('/search')
    }
  },
  computed: {
    unCheckChannelList () {
      const newArr = this.allChannelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      // console.log('---', this.userChannelList)
      // console.log(newArr)
      // console.log('aaaaaa')
      // console.log(this.userChannelList)
      return newArr
    }
  }
}
</script>

<style scoped lang='less'>
/* .main{
  padding-top: 0.833rem 20/24; */
/* } */
.logo{
    width: 100px;
    height: 30px;
}
.main{
  padding-top: 1rem /* 24/24 */;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup{
  width: 100vw;
  height: 100vh;
  background-color: white;
}
</style>
